<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>待支付</title>
    <link rel="stylesheet" href="../CSS/common.css">
    <link rel="stylesheet" href="../CSS/top.css">
    <link rel="stylesheet" href="../CSS/swiper-bundle.css">
    <link rel="stylesheet" href="../CSS/botton.css">
    <link rel="stylesheet" href="../CSS/DaiZhiFu.css">
</head>
<body>
     <div id="app">
         <!-- 头部/2 -->
     <header>
        <a href="./WoDe.html">
            <img src="../img//fh.png" alt="">
        </a>
        <span>待支付</span>
    </header>
    <section class="warp">
        <div>
           <a href="./DingDan.html">
            <p >全部</p>
           </a>
        </div>
            <div>
                <a href="#">
                <p style="color: rgb(26, 180, 60);">待支付</p>
                <span><img src="../img/qx.png" alt=""></span>
                </a>
            </div>
        <div>
             <a href="./DaiShouHuo.html">
            <p>待收货</p>
            </a>
        </div>
        <div>
            <a href="./DaiPingJia.html">
                <p>待评价</p>
            </a>
        </div>
    </section>
    <section class="warp-1" v-for="item in list">
        <div class="div-1">
            <p>{{item.ri}} <span>{{item.shi}}</span></p>
            <p>{{item.wan}}</p>
        </div>
        <div class="div-2" onclick="fn()">
            <img :src="item.url" alt="" style="margin: 0;">
            <img :src="item.urls" alt="">
        </div>
        <div class="div-3">
            <p>共{{item.jian}}件商品 实付：<span>￥{{item.money}}</span></p>
        </div>
        <div class="div-4">
            <a href="#">
                <div style="color: rgb(139, 139, 139);  background-color: rgb(221, 221, 221);">取消订单</div>
            </a>
            <a href="./TianXie.html">
                <div style="color: rgb(40, 163, 40); background-color: rgb(160, 214, 172);">去支付</div>
            </a>
        </div>
    </section>
     </div>
    <script src="../JS/vue3.js"></script>
    <script src="../jS/flexible.js"></script>
    <script>
         const app = Vue.createApp({
            data() {
                return {
                    list: [],
                }
            },
            mounted() {
                fetch("../JSON/DingDan/DingDan.json").then(res=>res.json()).then(res=>{
                    this.list=res
                })
            },
        }).mount("#app")
        function fn(){
           location.href='./订单详细.html'
        }
    </script>
</body>
</html>